<template>
  <div class="ip-segment">
    <div class="ip-item" v-for="(item, idx) in ipSegment" :key="item.label">
      <span class="ip-label">{{ item.label }}</span>
      <div class="ip-input">
        <el-input  
          v-model.number="item.value[i]" 
          v-for="(n, i) in 4" 
          :key="`ip${idx}-${i}`" 
          :ref="`ip${idx}-${i}`"
          maxlength="3" 
          size="small"
          @blur="checkVal(idx, i)"
          @input="checkNaN(idx, i)">
        </el-input>
      </div>
    </div>

    <div class="ip-btn">
      <el-button 
        v-for="btn in btns" 
        :key="btn.label" 
        :type="btn.type" 
        :disabled="!btn.type && ipList.length === 1" 
        size="small"
        @click="btn.fn">{{ btn.label }}</el-button>
    </div>
    
    <div class="ip-show scrollbar">
      <div 
        v-for="(ip, idx) in ipList" 
        :key="idx" 
        :class="{ 'is-selected': ip === selected }" 
        @click="select(ip)"
      >{{ ip }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ipSegment',
  props: ['ips', 'code'],
  watch: {
    ips(val) {
      if (!val || typeof val !== 'string') return;
      let arr = JSON.parse(val).map(item => this.GLOBAL.formatter.int2IP(item)),
          ipList = [];
      for (let i = 0; i < arr.length / 2; i++) {
        ipList.push(`${arr[i * 2]}-${arr[i * 2 + 1]}`);
      }
      !ipList.some(item => item === this.selected) && (this.selected = '');
      this.ipList = ipList;
    }
  },
  data() {
    return {
      ipSegment: [
        { label: '从', value: Array(4).fill(0) },
        { label: '到', value: Array(4).fill(0) }
      ],
      btns: [
        { label: '添加', fn: this.add, type: 'primary' },
        { label: '移除', fn: this.remove }
      ],
      ipList: [],
      selected: ''
    }
  },
  methods: {
    add() {
      let ip = `${this.ipSegment[0].value.join('.')}-${this.ipSegment[1].value.join('.')}`;
      !this.ipList.includes(ip) && this.modify([...this.ipList, ip]);
    },
    select(ip) {
      this.selected = ip;
    },
    remove() {
      if (!this.selected) return;
      let remain = this.ipList.filter(item => item !== this.selected);
      this.modify(remain);
    },
    modify(data) {
      let arr = [];
      data.forEach(item => {
        let ip2 = item.split('-');
        arr.push(this.GLOBAL.formatter.IP2Int(ip2[0]), this.GLOBAL.formatter.IP2Int(ip2[1]));
      });
      this.$emit('modify', this.code, arr);
    },
    checkNaN(idx, i) {
      let val = this.ipSegment[idx].value[i];
      this.$set(this.ipSegment[idx].value, i, (val + '').replace(/[^\d]/g, '') * 1);
      (val + '').length >= 3 && this.handleFocus(idx, i+1);
    },
    checkVal(idx, i) {
      let val = this.ipSegment[idx].value[i];
      val > 255 && (val = 255);
      this.$set(this.ipSegment[idx].value, i, val);
    },
    handleFocus(idx, i) {
      let $cpnts = this.$refs[`ip${idx}-${i}`];
      $cpnts && $cpnts[0].focus();
    }
  }
}
</script>

<style lang="less">
.border {
  border: 1px solid #DFE5EE;
  border-radius: 4px;
}

.ip-segment {
  width: 242px;
  & > div {
    margin-bottom: 10px;
  }
  .ip-label {
    margin-left: 6px;
  }
  .ip-input {
    display: inline-block;
    width: 200px;
    padding: 0 5px;
    margin-left: 5px;
    .border;
    .el-input {
      width: 50px;
      &:not(:last-child)::after {
        content: '.';
        position: absolute;
        bottom: 8px;
        right: 0;
      }
      .el-input__inner {
        padding: 0 10px !important;
        height: 28px !important;
        line-height: 28px !important;
        border: none !important;
        outline: none !important;
        text-align: center;
      }
    }
  }
  .ip-btn {
    display: flex;
    justify-content: center;
  }
  .ip-show {
    .border;
    width: 240px;
    height: 150px;
    & > div {
      height: 30px;
      line-height: 30px;
      padding-left: 8px;
      font-size: 13px;
    }
  }
}
</style>